<template>
	<view class="page-wrap">
		<match-media :min-width="MAX_SIZEiZE">
			<navBar></navBar>
		</match-media>
		<match-media :max-width="MAX_SIZEiZE - 1">
			<cu-custom :title="$t('Page.mineWallet.allDetail')"> </cu-custom>
		</match-media>
		<view class="content">
			<pc-nav-bar :pageName="$t('Page.mineWallet.allDetail')">
				<block slot="right">
					<view class="time">
						<picker fields="month" mode="date" :value="searchParams.searchdate" :start="startDate"
							:end="endDate" @change="bindDateChange">
							<view class="uni-input">
								{{searchParams.searchdate ? formatTime(searchParams.searchdate) : 'Search Month'}}
							</view>
						</picker>
					</view>
				</block>
			</pc-nav-bar>
			<match-media :max-width="MAX_SIZEiZE - 1">
				<view class="time h5-time">
					<picker fields="month" mode="date" :value="searchParams.searchdate" :start="startDate"
						:end="endDate" @change="bindDateChange">
						<view class="uni-input">
							{{searchParams.searchdate ? formatTime(searchParams.searchdate) : 'Search Month'}}
						</view>
					</picker>
				</view>
			</match-media>
			<scroll-view refresher-default-style="white" refresher-background="transparent" refresher-enabled
				scroll-with-animation :refresher-triggered="triggered" @refresherrefresh="refresherrefresh"
				:scroll-top="scrollTop" @scroll="onScroll" scroll-y="true" :style="{height:scrollHeight}"
				class="scroll-Y" @scrolltolower="lower">
				<view class="list-wrap">
					<view class="item" v-for="(item,index) in list" :key="item.id">
						<view class="status-text">
							{{remarkList[item.remark]}}
						</view>
						<view class="orderNo"> {{$t('Page.mineWallet.ddh')}}. {{item.order_sn}} </view>
						<view class="cont-bottom">
							<view :class="['order-price',item.type==1 ? 'add' : '']">
								{{item.type == 1 ? `+R$${item.money}` : `-R$${item.money}` }}
							</view>
							<view class="createtime" v-if="item.createtime">
								{{$tools.timeFormat(item.createtime, 'dd/mm/yyyy hh:MM')}}
							</view>
						</view>
					</view>
				</view>
				<uni-load-more :status="status" :contentText="contentText"></uni-load-more>
			</scroll-view>
		</view>
		<backToTop :isShow="isShow" @scrollToTop="scrollToTop"></backToTop>
	</view>
</template>

<script>
	import pcNavBar from '@/components/pcNavBar/pcNavBar.vue'
	import cuCustom from '@/components/cu-custom/cuCustom.vue'
	import {
		mapState
	} from 'vuex'
	import {
		Debounce
	} from '@/utils/common.js'
	import {
		MAX_SIZEiZE
	} from '@/common/app.js'
	import {
		sendMessage
	} from '@/api/websocket.js'
	export default {
		components: {
			pcNavBar,
			cuCustom
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			console.log('currentDate', currentDate);
			const formatDate = `${currentDate.split("/") }`
			return {
				MAX_SIZEiZE,
				searchParams: {
					page: 1,
					page_ini: 10,
					searchdate: currentDate
				},
				list: [],
				totalCount: 0,
				status: 'loading', //  more/loading/noMore
				contentText: {
					contentdown: this.$t('Page.loadmore.xl'),
					contentrefresh: this.$t('Page.loadmore.jzz'),
					contentnomore: this.$t('Page.loadmore.mygdl')
				},
				remarkList: ['',
					this.$t('Page.user.rccz'),
					this.$t('Page.user.rctx'),
					this.$t('Page.user.rczsfy'),
					this.$t('Page.user.rcejfy'),
					this.$t('Page.user.rcsjfy'),
					this.$t('Page.user.rcscjl'),
					this.$t('Page.user.rcykhs'),
					this.$t('Page.user.rcdlkc'),
					this.$t('Page.user.rcyqjl'),
					this.$t('Page.user.rcyjhs'),
					this.$t('Page.user.rctxbh'),
					this.$t('Page.user.rcdcjl'),
					this.$t('Page.user.rcmrjl'),
					this.$t('Page.user.rcczgdjl'),
					this.$t('Page.user.rchttj'),
					this.$t('Page.user.rchtkc'),
					this.$t('Page.user.rcyqdcjl'),
					this.$t('Page.user.rczttzjl'),
					this.$t('Page.user.rcejtzjl'),
					this.$t('Page.user.rcsjtzjl'),
				],
				scrollTop: 0,
				isShow: false, // 控制是否显示返回顶部按钮
				triggered: false,
				triggerHeight: Math.ceil(uni.getSystemInfoSync().windowHeight / 2.5)
			}
		},

		computed: {
			...mapState({
				theme: state => state.app.theme,
				windowSize: state => state.app.windowSize
			}),
			scrollHeight() {
				const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
				if (this.windowSize.windowWidth <= 768) {
					return `calc(100vh - 44px - 55px - 15px - ${statusBarHeight}px)`
				} else {
					return 'calc(100vh - 70px - 70px - 30px)'
				}
			},
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			this.getlist()
		},
		methods: {
			scrollToTop(e) {
				this.scrollTop = 0
				this.isShow = e
			},
			refresherrefresh(e) {
				this.triggered = true
				this.list = [];
				setTimeout(() => {
					this.searchParams.page = 1;
					this.getlist();
				}, 500)
			},

			onScroll: Debounce(function(e) {
				this.scrollTop = e.detail.scrollTop
				if (e.detail.scrollTop >= this.triggerHeight) {
					this.isShow = true
				} else {
					this.isShow = false
				}
			}, 500),

			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 5;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}`;
			},
			formatTime(str) {
				const year = str.split("-")[0]
				const month = str.split("-")[1]
				return `${month}/${year}`
			},
			bindDateChange(e) {
				this.searchParams.searchdate = e.detail.value
				console.log("this.searchParams.searchdate: ", this.searchParams.searchdate);
				this.searchParams.page = 1
				this.list = []
				this.searchParams.searchdate && this.getlist()
			},
			lower(e) {
				if (this.list.length < this.totalCount) {
					this.status = 'loading'
					this.searchParams.page++
					this.getlist()
				}
			},
			getlist() {
				const {
					MONEYLOG
				} = this.$api
				sendMessage({
					flag: MONEYLOG,
					content: this.searchParams
				})
				uni.$once(MONEYLOG, (res) => {
					const {
						code,
						data
					} = res
					if (code === 1) {
						this.triggered = false
						if (this.searchParams.page === 1) {
							this.list = data.list
							this.totalCount = data.count
						} else {
							this.list = [...this.list, ...data.list]
						}
					}

					if (this.list.length < this.totalCount) {
						setTimeout(() => {
							this.status = 'more'
						}, 1000)
					} else {
						this.status = 'noMore'
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-wrap {
		min-height: 100vh;
		background: var(--bg-3);

		.content {
			width: 100%;
			height: calc(100vh - 44px - var(--status-bar-height)) !important;
			overflow-y: auto;
			padding: 10px 15px 0;
			box-sizing: border-box;

			.time {
				position: relative;
				font-family: PingFang SC-Medium, PingFang SC;
				color: var(--color-1);
				height: 35px;
				line-height: 35px;
				text-align: center;
				border-radius: 20px;
				min-width: 200px;
				background: var(--bg-52);
				border-radius: 20px;
				font-size: 16px;

				&::after {
					content: '';
					position: absolute;
					right: 20px;
					top: 50%;
					transform: translateY(-18%);
					width: 0;
					height: 0;
					border: 8rpx solid transparent;
					border-top-color: var(--color-1);
				}

				&/deep/.uni-input {
					height: 35px;
					line-height: 35px;
					border-radius: 15px;
					background: transparent;
					padding: 0;

				}
			}

			.h5-time {
				background: var(--bg-36);
				border-radius: 20px 20px 20px 20px;
				margin: 10px 0;
				color: var(--color-1);

				&::after {
					border-top-color: var(--color-1);
				}
			}

			.scroll-Y {

				/* 隐藏竖向滚动条 */
				::-webkit-scrollbar {
					display: none;
				}

				.list-wrap {
					// margin: 0 30rpx;

					.item {
						background: rgba(204, 181, 155, 0.2);
						margin-bottom: 20rpx;
						font-weight: 500;
						padding: 12px 15px;
						border-radius: 15px;
						box-sizing: border-box;

						.status-text {
							font-size: 30rpx;
							line-height: 35rpx;
							margin-bottom: 12rpx;
							color: #fff;
						}

						.orderNo {
							font-size: 26rpx;
							color: var(--color-35);
							margin-bottom: 6rpx;
						}

						.cont-bottom {
							display: flex;
							justify-content: space-between;
							line-height: 25px;

							.order-price {
								font-size: 18px;
								font-weight: bold;
								color: var(--color-40);
							}

							.add {
								color: var(--color-41);
							}

							.createtime {
								font-size: 12px;
								color: var(--color-36);
							}
						}
					}
				}
			}
		}
	}

	@media screen and (min-width: 768px) {
		.page-wrap {
			padding-top: 70px;

			.content {
				width: 100%;
				height: calc(100vh - 70px) !important;
				overflow-y: auto;
				padding: 10px 30px 0;
				box-sizing: border-box;

				.scroll-Y {
					margin-top: 30px;
				}
			}
		}
	}
</style>